<script setup>
import { defineOptions, inject, watch, onMounted, ref } from 'vue'
import { dbOptions, javaTypeOptions } from '@/utils/config.js'
import { useMappingStore } from '@/stores/mapping.js'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'TypeMapping'
})
const mappingStore = useMappingStore()
const closeDialog = inject('closeDialog')
const data = ref({
  dbType: 'mysql',
  tableData: [],
  showEdit: false
})
const form = ref({
  index: 0,
  typeReg: '',
  startWith: '',
  javaType: ''
})
onMounted(() => {
  data.value.dbType = 'mysql'
  data.value.tableData = mappingStore.mysqlMapping
})
watch(data, (newVal) => {
  const dbType = newVal ? newVal.dbType : 'mysql'
  switch (dbType) {
    case 'oracle':
      data.value.tableData = mappingStore.oracleMapping
      break
    case 'postgresql':
      data.value.tableData = mappingStore.postgresqlMapping
      break
    case 'mysql':
    default:
      data.value.tableData = mappingStore.mysqlMapping
      break
  }
}, {
  deep: true
})
const saveMapping = () => {
  mappingStore.refreshMapping(data.value.dbType, data.value.tableData)
  // 保存到数 uTools 的数据库中
  if (window.utools) {
    window.utools.dbStorage.setItem(data.value.dbType, JSON.stringify(data.value.tableData))
  }
}

const addMapping = () => {
  data.value.showEdit = true
}
const handleEdit = (index, row) => {
  data.value.showEdit = true
  form.value = row
}
const handleDelete = (index, row) => {
  let mapping = mappingStore.mapping[data.value.dbType]
  mapping.splice(index, 1)
  mappingStore.refreshMapping(data.value.dbType, mapping)
  // 如果是 uTools 环境，保存到数据库中
  if (window.utools) {
    window.utools.dbStorage.setItem('mapping', JSON.stringify(mappingStore.mapping))
  }
  ElMessage.success('删除成功')
}
const doSave = () => {
  // 往pinia中添加数据
  let mapping = mappingStore.mapping[data.value.dbType]
  if (form.value.index === 0) {
    form.value.index = mapping.length
    mapping.push(form.value)
    mappingStore.refreshMapping(data.value.dbType, mapping)
  } else {
    mapping[form.value.index] = form.value
    mappingStore.refreshMapping(data.value.dbType, mapping)
  }
  // 如果是 uTools 环境，保存到数据库中
  if (window.utools) {
    window.utools.dbStorage.setItem('mapping', JSON.stringify(mappingStore.mapping))
  }
  data.value.showEdit = false
  ElMessage.success('保存成功')
}
</script>
<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-select
          v-model="data.dbType"
          placeholder="数据库"
          filterable>
        <el-option
            v-for="item in dbOptions"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-button @click="saveMapping" type="primary">保存</el-button>
      <el-button @click="addMapping" type="primary">新增</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-table :data="data.tableData">
      <el-table-column type="index" width="80" label="序号"/>
      <el-table-column prop="typeReg" label="正则"/>
      <el-table-column prop="startWith" label="开头"/>
      <el-table-column prop="javaType" label="Java类型"/>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)" type="primary" :icon="Edit"/>
          <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" :icon="Delete"/>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-dialog
      v-model="data.showEdit"
  >
    <el-form v-model="form" label-width="80">
      <el-form-item label="正则">
        <el-input v-model="form.typeReg" placeholder="正则表达式"/>
      </el-form-item>
      <el-form-item label="开头">
        <el-input v-model="form.startWith" placeholder="开头"/>
      </el-form-item>
      <el-form-item label="java类型">
        <el-select
            v-model="form.javaType"
            placeholder="java类型"
            filterable>
          <el-option
              v-for="item in javaTypeOptions"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSave">保存</el-button>
        <el-button type="primary" @click="data.showEdit = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<style></style>
